<template>
  <view class="tn-safe-area-inset-bottom">
<!-- 顶部自定义导航 -->
    <tn-nav-bar fixed customBack :bottomShadow="false" :backgroundColor="navBarBackgroundColor" id="navbar">
      <view slot="back" class='tn-custom-nav-bar__back' @click="goBack" :style="[navBarStyle]">
        <text class='icon tn-icon-left'></text>
        <text class='icon tn-icon-discover-fill'></text>
      </view>
      <view class="tn-flex tn-flex-col-center tn-flex-row-center" :style="[navBarStyle2]">
        <view class="tn-text-bold tn-text-xl">作品列表</view>
      </view>
    </tn-nav-bar>
    
    <swiper class="card-swiper" :circular="true"
      :autoplay="true" duration="500" interval="22000" @change="cardSwiper"> 
      <swiper-item v-for="(item,index) in list" :key="index" :class="cardCur==index?'cur':''">
        <view class="swiper-item image-banner">
          <image :src="item.url + item.path" mode="aspectFill"></image>
        </view>
      </swiper-item>
    </swiper>
    <view class="indication">
        <block v-for="(item,index) in swiperList" :key="index">
            <view class="spot" :class="cardCur==index?'active':''"></view>
        </block>
    </view>
    
    <!-- 头部start-->
    <view class="shadow-function tn-margin-bottom-xl" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
      <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
        <view class="justify-content-item tn-flex-row-center">
          <view class="logo-pic tn-shadow">
            <view class="logo-image">
              <view class="tn-shadow-blur" :style="'background-image:url('+ authorInfo.qr_url +');width: 110rpx;height: 110rpx;background-size: cover;'">
              </view>
            </view>
          </view>
        </view>
        <view class="justify-content-item">
          <view class="tn-flex tn-flex-col-center">
            <view class="tn-color-white">
              <view class="tn-text-center tn-text-lg tn-text-bold tn-margin-sm">
                {{ authorInfo.nickname }}
              </view>
              <view class="tn-text-ellipsis tn-text-sm" style="text-align: center;">
                <text class="">{{ authorInfo.remark }}</text>
              </view>
            </view>
          </view>
        </view>

      </view>
    </view>
    <!-- 头部 end-->
    
		<!-- 作者二维码开始 -->
    <!-- <tn-modal v-model="show1" :custom="true">
      <view class="custom-modal-content">
        <image mode='aspectFill' style="width: 100%;"></image>
        <view class="tn-text-center tn-padding-top">欢迎使用兔兔找图</view>
        <view class="tn-text-center tn-padding-top tn-text-lg">点击上图，可识别微信二维码</view>
      </view>
    </tn-modal> -->
		<!-- 作者二维码结束 -->
    
    <view class="group-wrap tn-bg-white" id="page_tips">
      
      <!-- 悬浮按钮-->
      <view class="tn-flex tn-flex-row-between" style="padding: 60rpx 0 30rpx 0;">
        <view class="tn-flex-1 justify-content-item tn-margin-xs tn-text-center">
          <tn-button backgroundColor="#3668fc" padding="40rpx 0" width="90%" fontBold @click="attention">
            <text class="tn-icon-my-add tn-padding-right-xs tn-color-white"></text>
            <text class="tn-color-white">关 注 作 者</text>
          </tn-button>
        </view>
        <view class="tn-flex-1 justify-content-item tn-margin-xs tn-text-center">
          <tn-button backgroundColor="#fbbd12" padding="40rpx 0" width="90%" fontBold @click="showModal">
            <text class="tn-icon-send tn-padding-right-xs tn-color-white"></text>
            <text class="tn-color-white">联 系 作 者</text>
          </tn-button>
        </view>
      </view>
      
      <view class="" style="padding: 30rpx 20rpx;" >
          <tn-waterfall ref="waterfall" v-model="list">
            <template v-slot:left="{ leftList }">
              <view v-for="(item, index) in leftList" :key="item.id" class="product__item" @click="tn('/pageA/details/details?image_uid=' + item.uid)">
                <view class="item__image">
                  <tn-lazy-load :threshold="6000" height="100%" :image="item.url + item.path" :index="item.id" imgMode="widthFix"></tn-lazy-load>
                </view>
                <view class="item__data">
                  <view class="item__title-container">
                    <text class="item__title tn-color-black">{{ item.title }}</text>
                  </view>
									<view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-top-xs" style="margin-top: 10rpx;">
										<view class="justify-content-item" v-if="item.device_type == 1">
											<text class="tn-icon-phone tn-color-gray tn-padding-right-xs"></text>
											<text class="tn-color-gray">手机壁纸</text>
										</view>
										<view class="justify-content-item" v-if="item.device_type == 2">
											<text class="tn-icon-computer tn-color-gray tn-padding-right-xs"></text>
											<text class="tn-color-gray">电脑壁纸</text>
										</view>
										<view class="justify-content-item" v-if="item.device_type == 3">
											<text class="tn-icon-ipad tn-color-gray tn-padding-right-xs"></text>
											<text class="tn-color-gray">平板壁纸</text>
										</view>
										<view class="justify-content-item">
											<text class="tn-icon-menu-match tn-color-gray tn-padding-right-xs"></text>
											<text class="tn-color-gray">{{item.series.title}}</text>
										</view>
									</view>
                </view>
              </view>
            </template>
            <template v-slot:right="{ rightList }">
              <view v-for="(item, index) in rightList" :key="item.id" class="product__item" @click="tn('/pageA/details/details?image_uid=' + item.uid)">
                <view class="item__image">
                  <tn-lazy-load :threshold="6000" height="100%" :image="item.url + item.path" :index="item.id" imgMode="widthFix"></tn-lazy-load>
                </view>
                <view class="item__data">
                  <view class="item__title-container">
                    <text class="item__title tn-color-balck">{{ item.title }}</text>
                  </view>
                  <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-top-xs" style="margin-top: 10rpx;">
                  	<view class="justify-content-item" v-if="item.device_type == 1">
                  	  <text class="tn-icon-phone tn-color-gray tn-padding-right-xs"></text>
                  	  <text class="tn-color-gray">手机壁纸</text>
                  	</view>
                  	<view class="justify-content-item" v-if="item.device_type == 2">
                  	  <text class="tn-icon-computer tn-color-gray tn-padding-right-xs"></text>
                  	  <text class="tn-color-gray">电脑壁纸</text>
                  	</view>
                  	<view class="justify-content-item" v-if="item.device_type == 3">
                  	  <text class="tn-icon-ipad tn-color-gray tn-padding-right-xs"></text>
                  	  <text class="tn-color-gray">平板壁纸</text>
                  	</view>
                  	<view class="justify-content-item">
                  	  <text class="tn-icon-menu-match tn-color-gray tn-padding-right-xs"></text>
                  	  <text class="tn-color-gray">{{item.series.title}}</text>
                  	</view>
                  </view>
                </view>
              </view>
            </template>
          </tn-waterfall>
        </view>
				
				<!-- 回到首页悬浮按钮开始-->
				<view v-if="show">
					<nav-index-button></nav-index-button>
				</view>
				<!-- 回到首页悬浮按钮结束 -->
				
        <tn-load-more :status="loadStatus"></tn-load-more>
    </view>
  </view>
</template>

<script>
  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	import { openAuthorInfo, userAttention } from "@/utils/api/author"
	import { imageList } from "@/utils/api/image"
	import NavIndexButton from '@/libs/components/nav-index-button.vue'
  export default {
    name: 'TemplateAuthor',
    mixins: [template_page_mixin],
		components: {NavIndexButton},
    data(){
      return {
        show1: false,
				show: false,
        cardCur: 0,
				authorInfo: {},
				authorId: "",
        /* 导航*/
        navBarRectInfo: {},
        navBarChangebaseLineHeight: 0,
        navBarStyle: {
          color:'#FFFFFF',
          opacity: 1,
          display: 'flex'
        },
        navBarStyle2: {
          color:'rgba(255,255,255,0)',
          opacity: 1,
          display: 'flex'
        },
        navBarBackgroundColor: 'rgba(255, 255, 255, 0)',
        activeBgAnimation: {},
        
        /* 瀑布流*/
        loadStatus: 'loadmore',
        list: [],
				searchWhere: {
					author_uid: "",
					page: 1,
					size: 20,
				}
      }
    },

    onLoad(params) {
			this.authorId = params.author_uid || ""
			this.searchWhere.author_uid = params.author_uid || ""
			this.getAuthorInfo()
      this.getImageList()
    },
    onReachBottom() {
      this.getRandomData()
    },
    
    onReady() {
      this.$nextTick(() => {
        this.initNavBarRectInfo()
      })
    },
    onPageScroll() {
      this.updateNavBarRectInfo()
    },
    
    methods: {
			getImageList() {
			  imageList(this.searchWhere).then(res => {
					if (res.items.length == 0) {
						this.$func.showToast("暂无新数据")
						this.loadStatus = "nomore"
					}
					this.list.push(...res.items)
					this.searchWhere.page = res.page + 1
					this.searchWhere.size = res.size
				})
			},
			getAuthorInfo() {
				openAuthorInfo({uid: this.authorId}).then(res => {
					this.authorInfo = res
				})
			},
      // 跳转
      tn(e) {
      	uni.navigateTo({
      		url: e,
      	});
      },
      
      // cardSwiper
      cardSwiper(e) {
        this.cardCur = e.detail.current
      },
      // 预览圈子管理员微信图片
      previewQRCodeImage() {
				this.$func.imagePreview("http://qiniucloud.qqdeveloper.com/e4156448575445177b945f2ed31a5f35.png")
      },
      // 关注作者
      attention(event) {
				userAttention({author_uid: this.authorId}).then(res => {
					this.$func.showToast(res.msg)
				})
      },
      // 显示作者二维码
      showModal() {
        this.show1 = true
				this.$func.imagePreviewToSave("http://qiniucloud.qqdeveloper.com/e4156448575445177b945f2ed31a5f35.png")
      },
      // 初始化导航栏信息
      async initNavBarRectInfo() {
        const navBarRectInfo = await this._tGetRect('#navbar')
        const pageTipsRectInfo = await this._tGetRect('#page_tips')
        // console.log(navBarRectInfo, pageTipsRectInfo, navBarRectInfo?.top, pageTipsRectInfo?.top);
        if (!navBarRectInfo.hasOwnProperty('top') || !pageTipsRectInfo.hasOwnProperty('top')) {
          setTimeout(() => {
            this.initNavBarRectInfo()
          }, 10)
          return
        }
        this.navBarRectInfo = {
          top: navBarRectInfo.top
        }
        this.navBarChangebaseLineHeight = pageTipsRectInfo.top - navBarRectInfo.top
      },
      // 更新导航栏信息
      updateNavBarRectInfo() {
        this._tGetRect('#page_tips').then((res) => {
          const top = res?.top || 0
          if (!top) {
            return
          }
          const differHeight = top - this.navBarRectInfo.top
          const opacity = differHeight / this.navBarChangebaseLineHeight
          if (opacity < 0) {
            // this.navBarStyle.opacity = 1
            // this.navBarStyle.display = 'flex'
            this.navBarStyle.color = 'rgba(0, 0, 0, ${opacity})'
            this.navBarStyle2.color = 'rgba(0, 0, 0, ${opacity})'
            this.navBarBackgroundColor = `rgba(255, 255, 255, 1)`
          } else {
            // this.navBarStyle.opacity = 1 - opacity
            // this.navBarStyle.display = 'flex'
            this.navBarStyle.color = 'rgba(255, 255, 255, 1)'
            this.navBarStyle2.color = 'rgba(255, 255, 255, 0)'
            this.navBarBackgroundColor = `rgba(255, 255, 255, ${1 - opacity})`
          }
          
          // console.log(top, differHeight, opacity);
        })
      },
			onReachBottom() {
				this.getImageList()
			},
			onPageScroll(e) {
				if (e.scrollTop > 1000) {
					this.show = true
				} else {
					this.show = false
				}
			}
    }
  }
</script>

<style lang="scss" scoped>
  /* 胶囊*/
  .tn-custom-nav-bar__back {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.03);
    border-radius: 1000rpx;
    border: 1rpx solid rgba(255, 255, 255, 0.5);
    // color: #FFFFFF;
    font-size: 18px;
    
    .icon {
      display: block;
      flex: 1;
      margin: auto;
      text-align: center;
    }
    
    &:before {
      content: " ";
      width: 1rpx;
      height: 110%;
      position: absolute;
      top: 22.5%;
      left: 0;
      right: 0;
      margin: auto;
      transform: scale(0.5);
      transform-origin: 0 0;
      pointer-events: none;
      box-sizing: border-box;
      opacity: 0.05;
      background-color: #000000;
    }
  }
  
  /* 轮播视觉差 start */
  .card-swiper {
    height: 500rpx !important;
  }
    
  .card-swiper swiper-item {
    width: 750rpx !important;
    left: 0rpx;
    box-sizing: border-box;
    // padding: 0rpx 30rpx 90rpx 30rpx;
    overflow: initial;
  }
    
  .card-swiper swiper-item .swiper-item {
    width: 100%;
    display: block;
    height: 100%;
    transform: scale(1);
    transition: all 0.2s ease-in 0s;
    will-change: transform;
    overflow: hidden;
  }
    
  .card-swiper swiper-item.cur .swiper-item {
    transform: none;
    transition: all 0.2s ease-in 0s;
    will-change: transform;
  }
  
  .image-banner{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .image-banner image{
    width: 100%;
    height: 100%;
  }
  
  /* 轮播指示点 start*/
  .indication{
    z-index: 9999;
    width: 100%;
    height: 36rpx;
    position: absolute;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    opacity: 0;
  }
  
  .spot{
    background-color: #FFFFFF;
    opacity: 0.6;
    width: 10rpx;
    height: 10rpx;
    border-radius: 20rpx;
    top: -60rpx;
    margin: 0 8rpx !important;
    position: relative;
  }
  
  .spot.active{
    opacity: 1;
    width: 30rpx;
    background-color: #FFFFFF;
  }
  
  /* 顶部 */
  .shadow-function {
      position: relative;
      z-index: 1;
      margin-top: -450rpx;
      padding-bottom: 110rpx;
      background-image: linear-gradient(rgba(255, 255, 255, 0.01), rgba(0, 0, 0, 0.4));
  }
  
  /* 用户头像 start */
  .logo-image {
    width: 110rpx;
    height: 110rpx;
    position: relative;
  }
  
  .logo-pic {
    background-size: cover;
    background-repeat: no-repeat;
    // background-attachment:fixed;
    background-position: top;
    border: 6rpx solid rgba(255,255,255,0.25);
    box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
    border-radius: 50%;
    overflow: hidden;
    // background-color: #FFFFFF;
  }
  
  /* 阴影 start*/
  .group-shadow {
    border-radius: 15rpx;
    box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
  }
  
  
  /* 内容*/
  .group-wrap {
    position: relative;
    z-index: 1;
    // padding: 20rpx 30rpx;
    margin-top: -130rpx;  
    margin-bottom: 40rpx;
    border-radius: 30rpx 30rpx 0 0;
  }
  
  /* 阴影 start*/
  .mould-shadow {
    border-radius: 15rpx;
    box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
  }    
  
  .tn-tabbar-height {
  	min-height: 20rpx;
  	height: calc(40rpx + env(safe-area-inset-bottom) / 2);
  }
  
  /* 图标容器5 start */
  .icon5 {
    &__item {
      // width: 30%;
      background-color: #FFFFFF;
      border-radius: 10rpx;
      padding: 0rpx;
      margin: 0rpx;
      transform: scale(1);
      transition: transform 0.3s linear;
      transform-origin: center center;
      
      &--icon {
        width: 96rpx;
        height: 96rpx;
        border-radius: 50%;
        margin-bottom: 18rpx;
        position: relative;
        z-index: 1;
      }
    }
  }  
  
  
  /* 瀑布流*/
  .product__item {
    background-color: #FFFFFF;
    overflow: hidden;
    margin: 0 10rpx;
    margin-bottom: 10rpx;
    // box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
    
    .item {
      /* 图片 start */
      &__image {
        width: 100%;
        height: auto;
        background-color: #FFFFFF;
        border: 1rpx solid #F8F7F8;
        border-radius: 10rpx;
        overflow: hidden;
      }
      /* 图片 end */
      
      /* 内容 start */
      &__data {
        padding: 14rpx 0rpx;
      }
      
      /* 标题 start */
      &__title-container {
        text-align: justify;
        line-height: 38rpx;
        vertical-align: middle;
      }
      &__store-type {
        height: 28rpx;
        font-size: 20rpx;
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 4rpx;
        border-radius: 6rpx;
        white-space: nowrap;
        text-align: center;
        top: -2rpx;
        margin-right: 6rpx;
      }
      &__title {
        font-size: 30rpx;
      }
      /* 标题 end */
      
      /* 标签 start */
      &__tags-container {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
      }
      &__tag {
        margin: 10rpx;
        color: #7C8191;
        background-color: #F3F2F7;
        padding: 4rpx 14rpx 6rpx;
        border-radius: 10rpx;
        font-size: 20rpx;
        
        &:first-child {
          margin-left: 0rpx !important;
        }
      }
      /* 标签 end */

      /* 内容 end */
    }
  }
  
</style>
